<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>菜鸟教程(runoob.com)</title>
  <style>
    body {
      margin: 0;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="500" height="600"></canvas>
  <!-- <img src="youqian.jpg" style="width: 200px;height: 200px;" /> -->

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    function get_ctx(element_id) {
      const canvas = document.getElementById(element_id)
      if (canvas.getContext) {
        return canvas.getContext('2d')
      }
      return null
    }

    (function () {
      const ctx = get_ctx('canvas')
      ctx.arc(100, 100, 75, 0, Math.PI * 2, false);
      ctx.stroke();
      ctx.clip();
      const img = new Image()
      img.onload = function(){
        ctx.drawImage(img,0,0,300,300)
      }
      img.src = './youqian.jpg'
      // ctx.fillRect(0, 0, 100, 100);
    }())
  </script>
</body>

</html>